<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>组件基础</title>
	</head>
	<body>
		<div id="app">
			<button-counter></button-counter>
			<button-counter></button-counter>
			<button-counter></button-counter>

			<div id="blog-posts-events-demo">
				<div v-bind:style="{fontSize:postFontSize + 'em'}">
					<blog-post 
						v-for="(post,index) in posts" 
						v-bind:key="post.id" 
						v-bind:post="post"
						v-on:enlarge-text="onEnlargeText"
						>
					</blog-post>
				</div>
			</div>
			
			<custom-input v-model="searchText"></custom-input>
			<p>{{searchText}}</p>
			
			<h2>插槽</h2>
			<alert-box>Something bad happened</alert-box>
		</div>

	</body>
	<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
	<script>
		Vue.component('alert-box',{
			template: `
				<div class="demo-alert-box">
					<strong>Error!</strong>
					<slot></slot>
				</div>
			 `
		});
		
		Vue.component('button-counter', {
			data: function() {
				return {
					count: 0,
				}
			},
			template: '<button v-on:click="count++">You clicked me {{count}} times.</button>',
		});

		Vue.component('blog-post', {
			props: ['post'],
			template: `
				<div class="blog-post">
					<h3>{{post.title}}</h3>
					<button v-on:click="$emit('enlarge-text',0.1)">Enlarge text</button>
					<div v-html="post.content"></div>
				</div>
			 `
		});
		
		Vue.component('custom-input',{
			props:['value'],
			template: `
				<input 
					v-bind:value="value"
					v-on:input="$emit('input',$event.target.value)"
				>
			 `
		})


		var vm = new Vue({
			el: '#app',
			data: {
				posts: [{
						id: 1,
						title: 'My journey with me',
						content: '<span style="color:blue">1111111111111</span>'
					},
					{
						id: 2,
						title: 'Blogging with Vue',
						content: '<span style="color:green">2222222222222</span>'
					},
					{
						id: 3,
						title: 'Why vue is so fun',
						content: '<span style="color:red">3333333333</span>'
					},
				],
				postFontSize:1,
				searchText:'',
			},
			methods:{
				onEnlargeText:function(enlargeAmount){
					this.postFontSize += enlargeAmount;
				}
			}
		})
	</script>
</html>